<template>
  <div class="loginbox" v-if="isShow">
    <div class="login">
      <h2>
        <img src="../../public/image/logo.png" alt="">
        <span>FAST OS DOCKER</span>
      </h2>
      <form class="form">
        <h3 class="h3">{{ $t('Login_Login') }}</h3>
        <p class="title">{{ $t('Login_Username') }}：</p>
        <p>
          <input @keyup.13="login" type="text" v-model.trim="username" />
        </p>
        <p class="title">{{ $t('Login_Password') }}：</p>
        <p>
          <input @keyup.13="login" type="password" autocomplete='off' v-model.trim="password" />
        </p>
        <p style="cursor:pointer;text-align: right;padding: 10px 0" @click="register">{{ $t('Login_Register') }}</p>
        <p class="submit">
          <el-button  @click="login">{{ $t('Login_Login') }}</el-button>
        </p>
      </form>
    </div>
    <div class="bottom">
      <myFooter />
    </div>
  </div>
</template>

<script>
import http from '@/utils/http'
import { Button } from 'element-ui'
import Vue from 'vue'
Vue.use(Button)
export default {
  data () {
    return {
      username: '',
      password: '',
      isShow: 1
    }
  },
  methods: {
    register(){
      this.$router.push('Regist')
    },
    login () {
      // 登录
      http({
        url: '/login',
        method: 'POST',
        timeout: 2000000,
        data: { username: this.username, password: this.password }
      }).then(res => {
        if (res.Code === 200) {
          this.$message({
            showClose: true,
            message: this.$t('Login_Message'),
            type: 'success'
          })
          const baseURL = localStorage.getItem('baseURL')
          const user = { username: this.username, token: res.Data, baseURL: baseURL }
          localStorage.setItem('user', JSON.stringify(user))
          localStorage.setItem('token', res.Data)
          localStorage.setItem('userList', JSON.stringify([user]))
          if (localStorage.getItem('user')) {
            this.$router.replace('/Home')
          }
        } else {
          return this.$message({
            showClose: true,
            message: res.Msg,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.loginbox{
  width: 100%;
  height: 100%;
  background: #F2F2F2;
  .bottom{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  .login{
    position: absolute;
    width: 563px;
    height: 415px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    h2{
      font-size: 36px;
      color: #07709D;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        width: 46px;
        margin-right: 10px;
      }
    }
    .form{
      margin-top: 25px;
      height: 340px;
      background: #0880B6;
      border-radius: 10px;
      box-shadow: 1px 1px 5px 1px #0880B6;
      padding: 45px 85px;
      box-sizing: border-box;
      font-size: 14px;
      color: #fff;
      .h3{
        text-align: center;
        font-size: 20px;
      }
      input{
        width: 100%;
        height: 35px;
        background: #0880B6;
        border-bottom: 1px solid #fff;
        color: #fff;
        font-size: 16px;
      }
      .title{
        margin-top: 10px;
      }
      .regist{
        display: flex;
        justify-content: space-between;
        padding: 20px 15px;
      }
      .submit{
        text-align: center;
        margin-top: 20px;
        //button{
        //  width: 112px;
        //  height: 40px;
        //  background: #0880B6;
        //  border-radius: 5px;
        //  color: #fff;
        //}
        //button:hover{
        //  background: #fff;
        //  color: #0880B6;
        //}
      }
    }
  }
}
</style>
